import React, { useState } from 'react';
import echarts from 'echarts';
import s from './chart1.module.css';
import { Radio } from '@knownsec/react-component';
import { datetime } from '../../../common/formatter';
import { vulLine } from '~/API';
const numFormat = new Intl.NumberFormat('en-US').format;
export default function chart1() {
  const [times, setTimes] = useState(0);
  const [count, setCount] = useState({ total: 0, week: 0, month: 0 });
  const getChartData = async (e) => {
    const line = await vulLine(e);
    setCount(line.data.count);
    const lines = line.data.lines.map((e_) => {
      e_.push(line.data.count[e.range]);
      return e_;
    });
    return lines;
  };
  // React.useMemo(() => {
  //   const params = { range: times ? 'month' : 'week' };
  //   getChartData(params);
  // }, [times]);
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
      },
      formatter([{ data, seriesName }]) {
        return `<div>
										<div>
                    <div style="display: flex; padding: 0.25rem 1.25rem;">
												<div style="width: 3rem;text-align: right;margin-left:1.25rem;">${data[0]}</div>
											</div>
											<div style="display: flex; padding: 0.25rem 1.25rem;">
												<div>累计漏洞总数</div>
												<div style="width: 3rem;text-align: right;margin-left:1.25rem;">${numFormat(data[1])}个</div>
											</div>
                      <div style="display: flex; padding: 0.25rem 1.25rem;">
												<div>严重漏洞数</div>
												<div style="width: 3rem;text-align: right;margin-left:1.25rem;">${numFormat(data[2])}个</div>
											</div>
											<div style="display: flex; padding: 0.25rem 1.25rem;">
												<div>高危漏洞数</div>
												<div style="width: 3rem;text-align: right;margin-left:1.25rem;">${numFormat(data[3])}个</div>
											</div>
											<div style="display: flex; padding: 0.25rem 1.25rem;">
												<div>中危漏洞数</div>
												<div style="width: 3rem;text-align: right;margin-left:1.25rem;">${numFormat(data[4])}个</div>
											</div>
											<div style="display: flex; padding: 0.25rem 1.25rem;">
												<div>低危漏洞数</div>
												<div style="width: 3rem;text-align: right;margin-left:1.25rem;">${numFormat(data[5])}个</div>
											</div>
										</div>
									</div>`;
      },
      backgroundColor: '#fff',
      textStyle: '#696C78',
      extraCssText: 'width: 10rem;color: #000;line-height:1rem;margin: 0 auto; border: 1px solid #ccc; box-shadow: 0 2px 4px #ccc;',
    },
    axisPointer: {
      show: true,
      lineStyle: {
        width: 2,
        type: 'dotted',
        color: '#F0443C',
      },
    },
    grid: {
      left: '50',
      right: '50',
      top: '10',
      bottom: '40',
    },
    xAxis: {
      type: 'time',
      boundaryGap: false,
      splitNumber: 7,
      splitLine: { show: false },
      axisLine: { lineStyle: { color: '#000' }, show: false },
      axisTick: {
        show: false,
      },
      axisLabel: {
        formatter(value) {
          const date = new Date(value);
          return datetime(date, 'yyyy/MM/dd');
        },
        backgroundColor: 'transparent',
        margin: 20,
        align: 'center',
      },
    },
    yAxis: {
      type: 'value',
      boundaryGap: false,
      axisTick: {
        show: false,
      },
      axisPointer: {
        type: 'line',
        label: {
          show: false,
        },
      },
      splitLine: { lineStyle: { color: '#cbd1da', type: 'dashed' } },
      axisLine: { lineStyle: { color: '#000' }, show: false },
    },
    series: [
      {
        data: [
          ['2022-01-06', 10, 10, 1, 2, 3, 4],
          ['2022-01-07', 20, 10, 1, 2, 3, 4],
          ['2022-01-10', 30, 10, 1, 2, 3, 4],
        ],
        name: '全部',
        type: 'line',
        smooth: true,
        smoothMonotone: 'x',
        showSymbol: false,
        lineStyle: {
          color: '#d60b0b',
          width: 1,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(255, 165, 78, 0.4977)',
            },
            {
              offset: 1,
              color: 'rgba(249, 222, 105, 0.08)',
            },
          ]),
        },
      },
    ],
  };
  React.useEffect(async () => {
    const params = { range: times ? 'month' : 'week' };
    const lines = await getChartData(params);
    const chart1 = echarts.init(document.getElementById('chart1'));
    option.xAxis.splitNumber = times ? 6 : 7;
    option.series[0].data = lines;
    chart1.setOption(option, true);
    window.onresize = () => {
      chart1.resize();
    }

  }, [times]);
  return (
    <div className={s.chart1}>
      <div className={s.chart1Title}>
        <p>
          <span>漏洞总数</span>
          <span className={s.red}>{count.total}</span>
        </p>
        <p>
          <span>近一月新增漏洞总数</span>
          <span className={s.red}>{count.month}</span>
        </p>
        <p>
          <span>近一周新增漏洞总数</span>
          <span className={s.red}>{count.week}</span>
        </p>
      </div>
      <div className={s.chartBox}>
        <div className={s.chartTitles}>
          <span className={s.chartTitles1}>新增漏洞数量</span>
          <span>
            <Radio.Group
              className={s.radioBorder}
              value={times}
              onChange={(e) => {
                setTimes(e.target.value);
              }}
            >
              <Radio value={0} className={s.radio0}>
                近一周
              </Radio>
              <Radio value={1} className={s.radio0}>
                近一月
              </Radio>
            </Radio.Group>
          </span>
        </div>
        <div id="chart1" style={{ width: '100%', height: '15rem', marginBottom: '16px' }}></div>
      </div>
    </div>
  );
}
